<h4>
  <a ng-click="activeInputData.name = 'explorationMetadata'" ng-hide="activeInputData.name.indexOf('explorationMetadata') == 0">
    <i class="icon-plus-sign oppia-cursor-pointer"></i>
  </a>
  <a ng-click="activeInputData.clear()" ng-show="activeInputData.name.indexOf('explorationMetadata') == 0">
    <i class="icon-minus-sign oppia-cursor-pointer"></i>
  </a>
  Exploration Metadata

  <img class="oppia-help" src="/images/help.png" ui-jq="tooltip"
       title="Click '+' to open an editor for the exploration metadata, including its title and cover image.">
</h4>

<div ng-show="activeInputData.name.indexOf('explorationMetadata') == 0">
  <div class="row-fluid">
    <div class="span6">
      <div>
        <strong>Title</strong>: <input type="text" ng-model="explorationTitle" ng-model-onblur>
        <br>
        <strong>Category</strong>: <input type="text" ng-model="explorationCategory" ng-model-onblur>
      </div>

      <div>
        <strong>Cover image</strong> (for the <a href="/gallery">Gallery</a>):

        <span ui-if="explorationImageId">
          <img class="oppia-small-image" ng-src="/imagehandler/<[explorationImageId]>">
          <button type="button" class="btn" ng-click="deleteExplorationImage()"
                  title="Delete this image">
            <i class="icon-trash"></i>
          </button>
        </span>
        <div ui-if="!explorationImageId">
          <em>No image supplied.</em>

          <button type="button" ng-click="openAddExplorationImageForm()"
                  ng-hide="activeInputData.name == 'explorationMetadata.addNewImage'">
            Add Image
          </button>

          <div ng-show="activeInputData.name == 'explorationMetadata.addNewImage'">
            <form id="newImageForm">
              <input type="file" id="newImage" name="newImage" image-upload="true">
              <br><br>
              <button type="button" ng-click="saveExplorationImage()">
                Save
              </button>
              <button type="button" ng-click="closeAddExplorationImageForm()">
                Cancel
              </button>
            </form>
          </div>
        </div>
      </div>

      <div>
        <strong>Parameters</strong>
        <ol>
          <li ng-repeat="param in parameters">
            <span class="oppia-editable-name"
                ng-hide="editingParam == $index"
                ng-click="startEditParam($index)">
              <span ng-show="param.name"><b><[param.name]></b></span>
              <span ng-show="param.description"><br><[param.description]></span>
              <span ng-show="param.values"><br>initialize to one of: <[param.values]></span>
            </span>
          </li>
        </ol>

        <button type="button"
                ng-hide="editingParam != null"
                ng-click="startAddParam()">
          Add Parameter
        </button>

        <br>

        <div ng-show="editingParam != null">
          <form novalidate class="oppia-form" name="newParameterForm" ng-submit="addParam(editingParam)">
            Parameter name:
            <input ng-model="tmpParamName" ui-select2="paramSelector"
                   placeholder="Parameter Name" style="width:300px" required>
            <br>
            Description: <input type="text" ng-model="tmpParamDesc" ng-model-onblur
                   placeholder="Parameter Description" style="width:300px">
            <br>
            Possible initial values:
            <input ng-model="tmpParamValues" ui-select2="valueSelector" multiple
                   placeholder="New Value(s)" style="width:300px">
            <br>
            <input type="submit" value="Save Changes"
                   ng-disabled="newParameterForm.$invalid">
            <button type="button" ng-click="resetParamInput()">Cancel</button>
          </form>
        </div>
      </div>
    </div>

    <div class="span6">
      <div ng-show="explorationEditors">
        <strong>Collaborator List</strong>
        <span ng-show="currentUser == explorationEditors[0]">
          <button type="button" ng-click="openAddNewEditorForm()"
                  ng-hide="activeInputData.name == 'explorationMetadata.addNewEditor'">
            Add New
          </button>
        </span>

        <ul>
          <li ng-repeat="editor in explorationEditors">
            <span ng-show="$index == 0">
              <em><[editor]></em>
            </span>
            <span ng-hide="$index == 0">
              <[editor]>
            </span>
          </li>
        </ul>

        <div ng-show="currentUser == explorationEditors[0]">
          <form ng-show="activeInputData.name == 'explorationMetadata.addNewEditor'"
                ng-submit="addNewEditor(newEditorEmail)">
            <input type="text" ng-model="newEditorEmail"
                   placeholder="New editor's email address">
            <input type="submit" value="Add Editor">
            <button type="button" ng-click="closeAddNewEditorForm()"
              ng-show="activeInputData.name == 'explorationMetadata.addNewEditor'">
              Cancel
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <br>
</div>
